<template>
  <el-form
      ref="menuForm"
      :model="menuForm"
      label-width="120px" size="mini">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="位置：">
          <el-radio-group v-model="menuForm.location">
            <el-radio name="top" label="top">顶部</el-radio>
            <el-radio name="side" label="side">侧栏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="类型：">
          <el-radio-group v-model="menuForm.type">
            <el-radio name="SYSTEM" label="SYSTEM">系统</el-radio>
            <el-radio name="USER" label="USER">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="名称：">
          <el-input v-model="menuForm.name" placeholder="请输入英文名称"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="显示名称：">
          <el-input v-model="menuForm.text" placeholder="请输入中文名称"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-form-item label="父级菜单：">
        <el-col :span="9">
          <el-form-item style="margin-bottom: 0">
            <el-select
                v-model="menuForm.topId"
                placeholder="请选择顶部菜单"
                :disabled="topMenuSelectDisable"
                @change="topMenuSelectChange">
              <el-option
                  v-for="item in topMenus"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item style="margin-bottom: 0">
            <el-select
                v-model="menuForm.sideId"
                placeholder="请选择父级菜单"
                :disabled="sideMenuSelectDisable">
              <el-option
                  v-for="item in sideMenus"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-row>

    <el-row>
      <el-col :span="18">
        <el-form-item label="描述信息：">
          <el-input v-model="menuForm.description"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

<!--    <el-row>-->
<!--      <el-col :span="10">-->
<!--        <el-form-item label="路径：">-->
<!--          <el-input v-model="menuForm.path"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="是否默认激活：" prop="delivery">
          <el-switch v-model="menuForm.defaultActive"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
export default {
  name: "MenuForm",
  data() {
    return {
      menuForm: {
        name: '',
        text: '',
        topId: '',
        sideId: '',
        location: '',
        defaultActive: false,
        path: '',
        description: ''
      },
      topMenus: [],
      sideMenus: [],
      menuData: {},
      topMenuSelectDisable: false,
      sideMenuSelectDisable: false,
    }
  },
  methods: {
    initMenusSelOptions() {
      const topMenusJson = window.sessionStorage.getItem("topMenus");
      this.topMenus = JSON.parse(topMenusJson);
      const menuDataJson = window.sessionStorage.getItem("menuData");
      this.menuData = JSON.parse(menuDataJson);
    },

    topMenuSelectChange(topId) {
      let top = this.topMenus.filter(m => m.id === topId)[0];
      if (!top) return;
      let menus = this.menuData[top.name];
      if (menus) {
        this.sideMenus = menus;
      }
    },

    // 获取表单参数
    takeFormData() {
      const data = this.menuForm;
      return JSON.parse(JSON.stringify(data));
    }
    
  },

  watch: {
    'menuForm.location': function (newVal, oldVal) {
      // 监听位置属性, 如果选择的是顶部菜单 则禁用父级菜单
      if (newVal === 'top') {
        this.topMenuSelectDisable = true;
        this.sideMenuSelectDisable = true;
      } else {
        this.topMenuSelectDisable = false;
        this.sideMenuSelectDisable = false;
      }
    }
  },

  created() {
    this.initMenusSelOptions();
  }


}
</script>

<style scoped>
.tag-fuzzy-box /deep/ input[aria-hidden="true"] {
  display: none !important;
}

.tag-fuzzy-box /deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}

/deep/ .el-radio__original {
  display: none !important;
}

/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
.el-radio__inner {
  box-shadow: none !important;
}


</style>